<template>
    <div class="boom-root">
      <div class="boom">
        <div class="boom-one">
          <div class="title">
            <span>人气</span><span>・畅销榜</span>
          </div>
          <div class="list">
            <span>小程序</span>
          </div>
          <div class="boom-content">
            <div class="content header">
              <div class="header-top">
                <img src="../../assets/img/boom.jpg" alt="">
                <div class="posi">
                  <p>
                    <span><i>22629</i> 在用 </span> <span>产品评分 <i>5</i></span>
                  </p>
                </div>
              </div>
              <div class="header-bootm">
                <div class="bottom">
                  <span>人气分类</span> <span>查看更多<i class="el-icon-d-arrow-right"></i></span>
                </div>
                <div class="bottom-two">
                  <ul>
                    <li>企业展示</li>
                    <li>政务民生</li>
                    <li>电商零售</li>
                    <li>餐饮外卖</li>
                    <li>生活服务</li>
                    <li>游戏</li>
                    <li>定制开发</li>
                  </ul>
                </div>
              </div>
            </div>

            <div class="content footer">
              <div>
                <div class="footer-img">
                  <img src="../../assets/img/boom1.jpg" alt="">
                </div>

                <div class="footer-con">
                  <p>多行业营销引流小程序</p>
                  <p>三级分销 · 秒杀 · 拼团等</p>
                  <p>
                    <span>免费试用</span> <span>买一送一</span>
                  </p>
                  <div>
                    <span>￥880</span><span>2398人在用</span>
                  </div>
                </div>
              </div>
              <div>
                <div class="footer-img">
                  <img src="../../assets/img/boom1.jpg" alt="">
                </div>

                <div class="footer-con">
                  <p>多行业营销引流小程序</p>
                  <p>三级分销 · 秒杀 · 拼团等</p>
                  <p>
                    <span>免费试用</span> <span>买一送一</span>
                  </p>
                  <div>
                    <span>￥880</span><span>2398人在用</span>
                  </div>
                </div>
              </div>
              <div>
                <div class="footer-img">
                  <img src="../../assets/img/boom1.jpg" alt="">
                </div>

                <div class="footer-con">
                  <p>多行业营销引流小程序</p>
                  <p>三级分销 · 秒杀 · 拼团等</p>
                  <p>
                    <span>免费试用</span> <span>买一送一</span>
                  </p>
                  <div>
                    <span>￥880</span><span>2398人在用</span>
                  </div>
                </div>
              </div>
              <div>
                <div class="footer-img">
                  <img src="../../assets/img/boom1.jpg" alt="">
                </div>

                <div class="footer-con">
                  <p>多行业营销引流小程序</p>
                  <p>三级分销 · 秒杀 · 拼团等</p>
                  <p>
                    <span>免费试用</span> <span>买一送一</span>
                  </p>
                  <div>
                    <span>￥880</span><span>2398人在用</span>
                  </div>
                </div>
              </div>
              <div>
                <div class="footer-img">
                  <img src="../../assets/img/boom1.jpg" alt="">
                </div>

                <div class="footer-con">
                  <p>多行业营销引流小程序</p>
                  <p>三级分销 · 秒杀 · 拼团等</p>
                  <p>
                    <span>免费试用</span> <span>买一送一</span>
                  </p>
                  <div>
                    <span>￥880</span><span>2398人在用</span>
                  </div>
                </div>
              </div>
              <div>
                <div class="footer-img">
                  <img src="../../assets/img/boom1.jpg" alt="">
                </div>

                <div class="footer-con">
                  <p>多行业营销引流小程序</p>
                  <p>三级分销 · 秒杀 · 拼团等</p>
                  <p>
                    <span>免费试用</span> <span>买一送一</span>
                  </p>
                  <div>
                    <span>￥880</span><span>2398人在用</span>
                  </div>
                </div>
              </div>




            </div>
          </div>

        </div>
        <div class="boom-one" style="margin-top: 50px">
          <div class="list">
            <span>网站建设</span>
          </div>
          <div class="boom-content">
            <div class="content header">
              <div class="header-top">
                <img src="../../assets/img/boom1.jpg" alt="">
                <div class="posi">
                  <p>
                    <span><i>22629</i> 在用 </span> <span>产品评分 <i>5</i></span>
                  </p>
                </div>
              </div>
              <div class="header-bootm">
                <div class="bottom">
                  <span>人气分类</span> <span>查看更多<i class="el-icon-d-arrow-right"></i></span>
                </div>
                <div class="bottom-two">
                  <ul>
                    <li>企业展示</li>
                    <li>政务民生</li>
                    <li>电商零售</li>
                    <li>餐饮外卖</li>
                    <li>生活服务</li>
                    <li>游戏</li>
                    <li>定制开发</li>
                  </ul>
                </div>
              </div>
            </div>

            <div class="content footer">
              <div>
                <div class="footer-img">
                  <img src="../../assets/img/boom2.jpg" alt="">
                </div>

                <div class="footer-con">
                  <p>多行业营销引流小程序</p>
                  <p>三级分销 · 秒杀 · 拼团等</p>
                  <p>
                    <span>免费试用</span> <span>买一送一</span>
                  </p>
                  <div>
                    <span>￥880</span><span>2398人在用</span>
                  </div>
                </div>
              </div>
              <div>
                <div class="footer-img">
                  <img src="../../assets/img/boom2.jpg" alt="">
                </div>

                <div class="footer-con">
                  <p>多行业营销引流小程序</p>
                  <p>三级分销 · 秒杀 · 拼团等</p>
                  <p>
                    <span>免费试用</span> <span>买一送一</span>
                  </p>
                  <div>
                    <span>￥880</span><span>2398人在用</span>
                  </div>
                </div>
              </div>
              <div>
                <div class="footer-img">
                  <img src="../../assets/img/boom2.jpg" alt="">
                </div>

                <div class="footer-con">
                  <p>多行业营销引流小程序</p>
                  <p>三级分销 · 秒杀 · 拼团等</p>
                  <p>
                    <span>免费试用</span> <span>买一送一</span>
                  </p>
                  <div>
                    <span>￥880</span><span>2398人在用</span>
                  </div>
                </div>
              </div>
              <div>
                <div class="footer-img">
                  <img src="../../assets/img/boom2.jpg" alt="">
                </div>

                <div class="footer-con">
                  <p>多行业营销引流小程序</p>
                  <p>三级分销 · 秒杀 · 拼团等</p>
                  <p>
                    <span>免费试用</span> <span>买一送一</span>
                  </p>
                  <div>
                    <span>￥880</span><span>2398人在用</span>
                  </div>
                </div>
              </div>
              <div>
                <div class="footer-img">
                  <img src="../../assets/img/boom2.jpg" alt="">
                </div>

                <div class="footer-con">
                  <p>多行业营销引流小程序</p>
                  <p>三级分销 · 秒杀 · 拼团等</p>
                  <p>
                    <span>免费试用</span> <span>买一送一</span>
                  </p>
                  <div>
                    <span>￥880</span><span>2398人在用</span>
                  </div>
                </div>
              </div>
              <div>
                <div class="footer-img">
                  <img src="../../assets/img/boom2.jpg" alt="">
                </div>

                <div class="footer-con">
                  <p>多行业营销引流小程序</p>
                  <p>三级分销 · 秒杀 · 拼团等</p>
                  <p>
                    <span>免费试用</span> <span>买一送一</span>
                  </p>
                  <div>
                    <span>￥880</span><span>2398人在用</span>
                  </div>
                </div>
              </div>




            </div>
          </div>

        </div>
        <div class="weibu">
          <img src="../../assets/img/boom3.jpg" alt="">
        </div>




      </div>
    </div>
</template>

<script>
    export default {
        name: "Boom"
    }
</script>

<style scoped>
  *{
    box-sizing: border-box;
  }
  li{
    list-style: none;
  }
  .boom-root{
    width: 100%;
    background-color: white;
    /*height: 1000px;*/
  }
  .boom{
    width: 1200px;
    /*height: 900px;*/
    /*border: 1px solid red;*/
    margin: 0 auto;
  }
  .boom .weibu{
    margin: 40px 0;
  }
  .boom .weibu img {
    width: 100%;


  }
  .boom-one .title{
    margin: 20px 0;

  }
  .boom-one .title span:nth-of-type(1){
    font-size: 25px;
    font-weight: bold;
    background: linear-gradient(to right, orange, orangered);
    -webkit-background-clip: text;
    color: transparent;
  }
  .boom-one .title span:nth-of-type(2){
    font-size: 26px;
    font-family: 新宋体;
  }
  .boom-one .list{
    margin-bottom: 10px;
  }
  .boom-one .list span{
    font-size: 25px;

  }

  .boom-content{
    display: flex;

  }
  /*.boom-content:hover img{*/
  /*  transform: scale(1.1);*/

  /*}*/
  .boom-content .content{
    /*display: inline;*/
    height: 420px;

    /*border: 1px solid black;*/
  }
  /*  --------左边样式--------*/
  .boom-content .header{
    flex-basis: 45%;
    width: 390px;
    display: flex;
    flex-direction: column;
    background-color: #f7f8fa;

  }
  .header .header-top{
    /*flex-basis: 55%;*/
    /*border: 1px solid red;*/
    position: relative;

  }
  .header .header-bootm{
    flex-basis: 100%;
    /*border: 1px solid red;*/
    padding: 20px 10px;
  }
  .header-bootm .bottom{
    display: flex;
    justify-content: space-between;
    margin: 10px;
  }
  .header-bootm .bottom span:nth-of-type(2){
    color: #999999;
    font-size: 12px;
  }
  .header-top img{
    width: 100%;
    height: 100%;
    cursor: pointer;
    transition: all 0.6s;
  }
  .header-top .posi{
    width: 100%;
    height: 45px;
    /*background-color: #04c8dc;*/
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    bottom: 0;
    left: 0;

  }
  .header-top .posi span{
    line-height: 45px;
    margin-left: 20px;
  }
  .header-top .posi span i{
    background-color: white;
    padding: 2px 10px;
    border-radius: 12px;
  }
  .header-bootm .bottom{

  }
  .header-bootm .bottom-two ul li{
    float: left;
    color: #39CD74;;
    border: 1px solid #39CD74;
    padding: 1px 6px;
    border-radius: 10px;
    font-size:12px;
    cursor: pointer;
    margin-right: 10px;
    margin-top: 10px;
  }

  .boom-content .footer{
    flex-basis: 100%;
    padding-left: 20px;
    display: flex;
    flex-wrap: wrap;
  }
  .footer>div{
    width: 49%;
    height: 133px;
    /*border: 1px solid mediumvioletred;*/
    background-color: #f7f8fa;
    padding: 10px;
  }
  .footer>div:nth-child(odd){
    margin-right: 16px ;
  }
  .footer>div div:nth-of-type(1){
    display: inline;
  }
  .footer>div img{
    width: 165px;
    height: auto;
    float: left;
  }
  .footer .footer-img{
    /*overflow: hidden;*/
  }
  .footer .footer-img:after{}
  .footer>div .footer-con{
    height: 100%;
    width: 197px;
    /*display: inline-block;*/
    margin-left: 10px;
    /*border: 1px solid red;*/
    position: relative;
    float: right;
    text-align: left;

  }
  .footer>div .footer-con p{
    margin-bottom: 5px;
  }
  .footer>div .footer-con p:nth-of-type(1):hover{
    color: #409EFF;
  }
  .footer>div .footer-con p:nth-of-type(1){
    font-weight: bold;
    font-size: 15px;
    cursor: pointer;
  }
  .footer>div .footer-con p:nth-of-type(2){
    font-size: 13px;
    color: #999999;
  }
  .footer>div .footer-con p:nth-of-type(3) span:nth-of-type(1){
      color: orange;
      font-size: 12px;
    border: 1px solid orange;
    margin-right: 10px;
    border-radius: 2px;
  }
  .footer>div .footer-con p:nth-of-type(3) span:nth-of-type(2){
    color: red;
    font-size: 12px;
    /*border: 1px solid red;*/
    border-radius: 2px;
  }
  .footer>div .footer-con div{
    width: 100%;
    height: 30px;
    /*border: 1px solid red;*/
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
  }
  .footer>div .footer-con div span{
    line-height: 30px;
  }
  .footer>div .footer-con div span:nth-of-type(1){
    font-size: 18px;
    color: orangered;
    font-weight: bold;
  }
  .footer>div .footer-con div span:nth-of-type(2){
    color: #999999;
    font-size: 12px;
  }




</style>
